<template>
  <div class="home">
    <heads>
      搜索
    </heads>
    <myinput v-model="val"></myinput>
    <!-- v-model其实是value属性和input事件的合写 -->
    <!-- <input type="text" v-model="val" /> -->
    <button @click="search">搜索</button>
    <button @click="clear">清空历史记录</button>
    <ul>
      <li v-for="(item, index) in $store.state.history" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import heads from "@/components/Header.vue";
import myinput from "../components/MyInput.vue";

export default {
  data() {
    return {
      val: "",
      // value: "",
    };
  },
  name: "Home",
  components: {
    heads,
    myinput,
  },
  methods: {
    search() {
      let res = this.$store.state.history.filter((item) => {
        return item == this.val;
      });
      if (res.length > 0) {
        alert("不能重复搜索");
        return false;
      }
      //如果有重复的就结束 并且alert提示
      this.$store.commit("sethistory", this.val);
      this.$router.push({ path: "/", query: { val: this.val } });
    },
    clear() {
      this.$store.commit("clear");
    },
  },
};
</script>
